<template>
  <div class="page-wrapper flex-vertical">
    <div class="app-container fill">
      <VForm :formData="formData" :inline="true" >
        <template #btns>
          <div>
            <VUpload :limit="1" @change="change" v-model="list" :show-file-list="false" uploadUrl="/albumuUpload"/>
          </div>

        </template>
      </VForm>
      <table-list ref="tableRef" :columns="logsColumnData" :request="FileList" :params="params">
        <template #操作="{row}">
          <el-button type="danger" link @click="toEdit(row)">删除</el-button>
        </template>
      </table-list>
    </div>
  </div>

</template>

<script setup>
import {ElMessage} from "element-plus";

defineOptions({ name: 'File' })
import TableList from "@/components/table-list/index.vue";
import {FileList, filesDel} from "@/api";
import {useRouter} from 'vue-router'
const router = useRouter()
const logsColumnData = ref([
  { label: "文件名", prop: "name" },
  { label: "地址", prop: "url" },
  { label: "关联", prop: "fileables",formatter:val=>val?.fileables ?val.fileables.fileable_type:'' },
  { label: "创建时间", prop: "created_at" },
  { label: "操作",slot:"操作",fixed:'right' },
]);

const params = ref({
  type:1
})

const formData = ref([
  {
    tag:'el-input',
    label:'文件名',
    prop:'name',
    rules:[
      {  message: '请选择', trigger: 'blur' },
    ]
  }
]);

const toPage = ()=>{
  dialogTableVisible.value = true;
}
const tableRef = ref()
const toEdit = row=>{
  console.log('row',row);
  filesDel(row.id).then(res=>{
    ElMessage.success("删除成功");
    tableRef.value.getData(true);
  })
}


const dialogTableVisible = ref(false);

const list = ref([])
const change = file =>{
  console.log('file',file)
  list.value = [];
  tableRef.value.getData(true);
}
</script>
